<template>
  <el-dialog class="pick-dialog" title="确认收货" :visible.sync="dialogVisible" :close-on-click-modal="false" width="800px">
    <div class="form-box">
      
      <el-descriptions :labelStyle="{ width:'100px' }" title="订单信息" labelClassName="label-txt" border :column='1'>
          <el-descriptions-item label="游戏名称">{{ orderInfo.gameName }}</el-descriptions-item>
          <el-descriptions-item label="区服" >{{ orderInfo.qufu }}</el-descriptions-item>
          <el-descriptions-item label="商品编号">{{ orderInfo.goodsId }}</el-descriptions-item>
          <el-descriptions-item label="订单金额">{{ orderInfo.actualAmount }}</el-descriptions-item>
          <el-descriptions-item label="换绑截图">
            <img-box :img="sendInfo.profileImg"></img-box>
          </el-descriptions-item>
          <el-descriptions-item label="游戏账号">{{ sendInfo.accountNumber }}</el-descriptions-item>
          <el-descriptions-item label="游戏密码">{{ sendInfo.accountPassword }}</el-descriptions-item>
      </el-descriptions>
      <div style="margin-top: 20px;color: blueviolet;">
        确认收货后交易金额立即转入卖家账户，请确认已经交易完成再操作！
      </div>
      <div class="center">
        <el-button @click="close('ruleForm')">关闭</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">确认收货</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import orderApi from "@/api/pickUp/order";
import { mapGetters } from "vuex";
export default {
  name: "pick",
  data() {
    return {
      dialogVisible: false,
      loading: false,
      ruleForm: {
        id: "",
      },
      rules: {
        realAccountNumber: [
          { required: true, message: "请输入真实游戏账号", trigger: "blur" },
        ],
      },
      orderInfo:{},
      ziliaoImgs:[],
      sendInfo:{}
    };
  },
  // computed: {
  //   ...mapGetters(["userInfo"]),
  // },
  created() {},
  methods: {
    open(row) {
      this.orderInfo = {...row}
      this.loading = false;
      this.ruleForm.id = row.id;
   
      this.dialogVisible = true;
      this.getSendInfos(this.ruleForm.id)
    },
    // 查询发货资料
    getSendInfos(sendId) {
      orderApi.getSaleOrderProfile(sendId).then((res) => {
        this.sendInfo = res.data;
      });
    },
    submitForm(formName) {
      this.loading = true;
      this.ruleForm.type=2
      orderApi.finishOrder(this.ruleForm).then((res) => {
        this.dialogVisible = false;
        this.loading = false;
        if (res.code == 200) {
          this.$message.success("订单已完成");
          this.$parent.getList();
        }
      }).catch(err=>{
        this.loading = false;
      })
    },
    close(formName) {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.tip {
  padding-left: 110px;
  margin-bottom: 20px;
  span {
    color: red;
  }
}
.demo-ruleForm {
  padding-right: 20px;
}

.center {
  text-align: center;
  margin-top: 20px;
}

.pick-dialog >>> .el-input--medium input {
  text-align: left;
}
</style>
